<template>
  <div>
    <vCommonPage :title="$route.query.pageTitle">
      <div slot="customContent">
        <el-dialog title='请填写住院号码和身份证号码后6位' :visible.sync="showNumberInput"  :before-close="handleClose">
      <el-row id="phone_row">
        <el-col :span='15' :offset="5">
          <el-input ref="autofocus" v-model="patientId" autocomplete="off" placeholder='请输入8位住院号码'  @focus="getinPatientId">
            <template slot="prepend">住院号码:</template>
          </el-input>
        </el-col>
           <el-col :span='15' :offset="5">
          <el-input ref="autofocusid" v-model="idNo" autocomplete="off" placeholder='请输入身份证后6位'  @focus="getidNo">
            <template slot="prepend">身份证号码后6位:</template>
          </el-input>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span='10' :offset="7">
          <div class="key-pad" style="width:240px;height:300px;margin:20px 0 0 0;">
            <Keypad @OnKey="OnKey"/>
          </div>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="OnCancel" >取 消</el-button>
        <el-button type="primary" @click="OnOk">确 定</el-button>
      </span>	
    </el-dialog>

   <el-dialog title='请输入住院预交金充值金额' :visible.sync="showAmountInput"  :before-close="handleClose">
      <el-row id="phone_row">
        <el-col :span='15' :offset="5">
          <el-input ref="autofocusfee" v-model="fee" autocomplete="off" placeholder='请输入充值金额'  @focus="getfee">
            <template slot="prepend">充值金额:</template>
          </el-input>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span='10' :offset="7">
          <div class="key-pad" style="width:240px;height:300px;margin:20px 0 0 0;">
            <Keypad @OnKey="OnKey"/>
          </div>
          <!-- <div id="keypanel">
            <ul id='keyboard'>
              <li class="letter" @click="OnKey(1)">1</li>
              <li class="letter" @click="OnKey(2)">2</li>
              <li class="letter" @click="OnKey(3)">3</li>
              <li class="letter" @click="OnKey(4)">4</li>
              <li class="letter" @click="OnKey(5)">5</li>
              <li class="letter" @click="OnKey(6)">6</li>
              <li class="letter" @click="OnKey(7)">7</li>
              <li class="letter" @click="OnKey(8)">8</li>
              <li class="letter" @click="OnKey(9)">9</li>
               <li class="letter" @click="OnKey('.')">.</li>
              <li class="letter" @click="OnKey(0)">0</li>
              <li class="del" @click="OnKey(-1)">删</li>
            </ul>
          </div> -->
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="OnCancel" >取 消</el-button>
        <el-button type="primary" @click="OnOkFee">确定充值</el-button>
      </span>
    </el-dialog>
    <vUser />

      </div>
    </vCommonPage>
  
  </div>
</template>

<script>
// 刷卡图标
import zzfkUrl from '@images/zzfk/readingIdCard.png'
import { SiupoSlipPrinter, IDCardReader, IdInfo } from '@api/tools/Hardware.js'
import { commonPost } from "@api/data";
import { Message, MessageBox, Loading, Alert } from "element-ui"
import Keypad from '@/components/common/Keypad.vue'

export default {
  components: {
    Keypad
  },
  data() {
    return {
      /* name:"",  //姓名
      sex: "",  //性别
      id:"",  //身份证
      phone:"",  //电话 */
      inputnum:"",
      idNo:"",
      patientId: "",
      fee:"",
      zzfkUrl:zzfkUrl,  //刷卡图标
      showAmountInput: false,
      showNumberInput: false,
      idReader: new IDCardReader(),
      printer: new SiupoSlipPrinter(),
      timerhandle: {},
      idInfo : new IdInfo(),
      qrcode : '',
      isInputWhere:"",
    }
  },
  methods: {
        handleClose() {
      this.$confirm("确认退出?")
        .then(_ => {
          this.$router.push({ name: "home" });
        })
        .catch(_ => {
          return;
        });
    },
    getinPatientId(){
      this.inputnum = ""
      this.patientId = ""
      this.$refs.autofocus.focus()
      this.isInputWhere = "patientId"
      //   this.$nextTick(function() {
      //   this.$refs.autofocus.focus()
      // });
      //  this.inPatientId=this.inputnum;
      //    console.log("inPatientId="+ this.inPatientId);
    },
    getidNo(){
      this.inputnum = ""
      this.idNo = ""
      this.$refs.autofocusid.focus()
      this.isInputWhere = "idNo"
    },
    getfee(){
      this.inputnum = ""
      this.fee = ""
      this.$refs.autofocusfee.focus()
      this.isInputWhere = "fee"
    },
    OnKey(num) { 
      if(num != -1) {
        if(this.inputnum.length < 8) {
          this.inputnum += num;
        }
      } else {
        if(this.inputnum.length > 1) {
          this.inputnum = this.inputnum.substr(0, this.inputnum.length - 1);
        } else {
          this.inputnum = '';
        }
      }
      switch(this.isInputWhere){
        case "patientId" :
          this.patientId = this.inputnum
          break; //可选
        case "idNo" :
          this.idNo = this.inputnum
          break; //可选
         case "fee" :
          this.fee = this.inputnum
          break; //可选
      }

      //   this.$nextTick(function() {
      //   this.$refs.autofocus.focus()
      // });
      console.log("inputnum="+ this.inputnum);
    },
    OnOkFee(){
      if(this.fee == '') {
        MessageBox.alert('请输入充值金额');
        return;
      }
       // this.$store.dispatch('user/updatechargefee',this.fee);
        this.$store.dispatch('user/updateuserpay',this.fee);
        this.$store.dispatch('route/updatePreStageEnd', "zycz")
        this.$router.push({ name: "payments",  query:{from: "zycz"}});
    },
    OnOk() {
      if(this.patientId == '') {
        MessageBox.alert('请输住院号');
        return;
      } else if(this.patientId.length < 8) {
        MessageBox.alert('请输入正确的8位住院号');
        return;
      }
        if(this.idNo == '') {
        MessageBox.alert('请输入身份证号码后6位');
        return;
      } else if(this.idNo.length < 6) {
        MessageBox.alert('请输入身份证号码后6位');
        return;
      }

      this.queryInHosuserinfo()
      .then(()=>{})
      .catch(e=>{
        console.log(e.message);
        MessageBox.alert(e.message, {
          confirmButtonText: "确定",
          callback: action => {
            setTimeout(() => {
              this.$router.push({ name: "home" });
            }, 500);
          }
        });
      });
    },
    OnCancel() {
      this.$router.push({ name: "home" })
    },
   queryInHosuserinfo() {
      let data = {};
      data.url = "/api/GetInptPatientInfo";
      data.payload = {
        idNo:this.idNo,
        patientId:this.patientId,
        termId: this.$store.state.terminfo.terminfo.termId,
        hisOperNo: this.$store.state.terminfo.terminfo.hisOperNo,
      };
      commonPost(data)
        .then(res => {
           res.data.map(item => {
             this.showAmountInput=true;
             this.showNumberInput=false;
           this.$store.dispatch("user/updateuserinfo", item);
            });
        });
    },
    async Print() {
      console.log("开始打印");
      //await this.printer.Open();
      await this.printer.Reset();    
      await this.printer.SetFontSize(2,2);
      await this.printer.SetBold(true);
      await this.printer.SetLineSpace(1);
      await this.printer.Print('');
      await this.printer.Print('');
      await this.printer.Print('');
      await this.printer.SetAlignType(1);
      await this.printer.Print('长春市九台人民医院');
      await this.printer.Print('电子健康卡');
      await this.printer.Print('');
      await this.printer.SetAlignType(0);
      await this.printer.Print('姓名:'+this.idInfo.Name);
      await this.printer.Print('ID号:'+ this.patientId);
      await this.printer.Print('');
      await this.printer.SetAlignType(1);
      await this.printer.PrintQR(7, this.qrcode);
      await this.printer.SetAlignType(0);
      await this.printer.Print('');
      await this.printer.Print(' 注  意 事 项：');
      await this.printer.Print('');
      await this.printer.Print('  该卡为实名制，请妥善保管,扫描凭条上二维码即可进行挂号、预约等。');
      await this.printer.Print('');
      await this.printer.Print('');
      await this.printer.Print('');
      await this.printer.Print('');
      await this.printer.Print('');
      await this.printer.FeedLines(6 * 24);
      await this.printer.CutOff();
      //await this.printer.Close();
    }
  },
 
  mounted() {    
      this.showNumberInput = true;
      this.getinPatientId();
    // this.printer.Open();

    // this.idReader.Open()
    // .then(()=>this.BeginReadID())
    // .catch(e=>{
    //   MessageBox.alert(e.message, {
    //     confirmButtonText: "确定",
    //     callback: action => {
    //       setTimeout(() => {
    //         this.$router.push({ name: "home" });
    //       }, 500);
    //     }
    //   });
    // });
  },

};
</script>

<style scoped>
  /* .el-row {
    padding: 0 120px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .el-col {
    position: relative;
    box-sizing: border-box;
    margin: 30px 0;
    width: 380px;
    text-align: center;
  } */
  #phone_row {
    margin: 25px 0 0 0;
  }

  #keypanel {
    background-color: rgb(188, 190, 192);
    width: 150px;
    height: 187px;
  }

  #keyboard {
    margin: 0 5px 0 5px;
    padding: 0;
    list-style: none;
    color: #2b587a;
  }

  #keyboard li {
    float: left;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #fff;
    border: 1px solid #f9f9f9;
    border-radius: 5px;
  }

  .letter {
    margin:2px 2px 2px 2px;
    font-family: tahoma, arial, verdana, sans-serif, 'Lucida Sans';
    font-size: 22px;
    font-weight: bold;
  }

  .del {
    margin:2px 2px 2px 2px;
    font-family: tahoma, arial, verdana, sans-serif, 'Lucida Sans';
    font-size: 22px;
    font-weight: bold;
  }

  .lastone {
    margin: 2px 2px 2px 48px;
    font-family: tahoma, arial, verdana, sans-serif, 'Lucida Sans';
    font-size: 22px;
    font-weight: bold;
  }
</style>
<style>
.el-form-item__content{
  float:left;
}

.el-icon-loading {
  font-size: 54px;
}
</style>
